[1주차 기본/심화/공유 과제] 쇼핑리스트, 투두리스트 #1

Bowoon1216 · 2024-04-05T04:55:49Z

✨ 구현 기능 명세

🧩 기본 과제1

header 구현
- 고정되어서 어떤 스크롤 위치에서도 header가 보여야합니다. (상단 고정)
- 헤더 양쪽에 대표 아이콘과 햄버거바가 존재합니다.
nav 구현 (목차)
- 스크롤을 이동해도 고정되어 있는 4가지 종류의 목차를 구현합니다.
- 클릭시 해당 목차로 이동합니다.
section 구현
- 상단에 카테고리가 있는 section을 구현합니다.
- 각 item은 이미지, 좋아요버튼, 품목이름, 가격이 중앙정렬로 포함되어야 합니다.
footer 구현
- text가 중앙정렬이 되어 있는 하단 footer를 구현합니다.

🧩 기본 과제2

간단 구현
- input 커스텀
todoList
- todoList 말줄임표 처리
- 삭제버튼 오른쪽 정렬
CSS
- 멈추지 않는 animation 적용
- 그라데이션 색상 한 곳이상 적용
- 폰트 적용

🌠 심화 과제

hover
- 좋아요 아이콘 hover시 색상이 변경되어야 합니다.
- nav - 각 목차 hover시 배경과 텍스트의 색상 변경이 일어나야합니다.
section
- 반응형으로 구현합니다. (5→4→3→2→1)
- item이 2개, 1개 남았을 때는 화면에 꽉 차도록 크기를 조정해야합니다.
- 목차를 눌렀을 때 카테고리 제목이 헤더나 다른 부분에 가리지 않게 정확히 이동해야합니다.
- 이미지 hover시 커졌다 작아졌다를 반복합니다.
- 애니메이션이 빠르지 않게 하고, 부드럽게 처리합니다.
무한으로 움직이는 배너
- 5개 이상의 item을 반복해서 보여주는 배너를 만듭니다.
  
  → html과 css만으로 구현해야만 합니다.

공유과제

검색엔진 최적화(SEO)란 무엇인가?
SCSS를 도입기
CSS방법론

링크 첨부 : https://www.notion.so/SEO-0608bace457040b59946d6bb8e503319

📌 내가 새로 알게 된 부분

사실 이번 과제 하기전까진 css 파일을 직접 써본적이 많지 않았는데..
이번과제하면서 그동안 해야될 것들을 이제서야 하면서 뭔가 정리된 기분 이었습니다... !!

💎 구현과정에서의 고민과정(어려웠던 부분) 공유!

쇼핑몰에서 아무래도 사진 넣는 부분이.. 정말 모든 사진을 수동으로 복붙했습니다.. ㅋㅋ
이부분 다들 어떻게 하셨는지 궁금해요 🥺

🥺 소요 시간

기본과제들은 각 2시간정도
심화과제는 ... 합쳐보면 3-4시간 나올것같네용 하하
아티클은 2-3시간정도! (찾아보다가 신기하고 재밌어서 더 찾아보면서 해서 좀 걸린것같아요 ㅎㅎ)

🌈 구현 결과물

구현 결과를 동영상으로 캡쳐했는데 넘 커서 노션에 올리고 노션링크달았습니다!!
노션링크: https://www.notion.so/1-ab199656764c4d049fcde404a18ee50d?pvs=4

wrryu09 · 2024-04-08T01:46:48Z

week1/shopping list/style.css

+    width: 50px;
+    height: 5px;
+    margin: 10px;
+    border-radius:30px;


크기를 픽셀로 고정하기보다는 상대 단위를 사용하는 게 어떨까요?
관련 자료 읽어보고 px, em, rem과 같은 단위 더 자세히 알아보면 도움이 될 것 같아요!
읽어보면 좋을 자료 링크 첨부합니당

https://yozm.wishket.com/magazine/detail/1410/

어머 정말 넘 유익해요 .. 다 읽고 왔슴다! 물론 다 이해하진 못했지만 px와 rem차이와 각자의 특성을 알게되었네용:) 고마워요~~

wrryu09 · 2024-04-08T02:00:54Z

week1/shopping list/index.html

+        <label>
+            <span></span>
+            <span></span>
+            <span></span>
+        </label>


https://fonts.google.com/icons
https://fontawesome.com/icons

이런 곳에 귀여운 아이콘들이 많으니 구경해 보시죠!

오 구글 폰트만 사용했었는데 아이콘도 되는 군요.!!!!! 감삼다!!

배치로 인해 h1태그를 두번으로 나눠서 사용하신 것 같은데 아이콘을 img나 svg로 사용하시는 것이 좋을 것 같아요!
h1태그는 SEO에 가장 중요한 태그 중 하나인 데 하트가 검색엔진으로 잡히면 SEO에서 좋지 않은 결과를 보일 것 같습니다!

wrryu09 · 2024-04-08T02:01:59Z

week1/shopping list/index.html

+            <button><a href="#acc">악세서리</a></button>
+        </span>
+    </nav>
+    <!--메인 :: 이미지 넣는게 이렇게 수동으로 밖에 안되나ㅠ-->


아무래도 html css만 이용하다 보면 이미지를 정적으로 넣어둬야 할 것 같네요!

그게 우리 과제의 묘미 ㅜ

wrryu09 · 2024-04-08T02:02:55Z

week1/shopping list/index.html

+            <h1 id="all">전체</h1>
+            <label class="container">
+                <span>
+                    <img src="img/a1.jpg"/>


접근성을 위해서 img 태그 alt 속성에 내용을 추가해주는 게 좋을 것 같아요!

제가 저번주에 공유과제 검색엔진 최적화 했으면서 정작 못 실천하고 있었네요:) 알려주셔서 감사함다,,<3

wrryu09 · 2024-04-08T02:05:22Z

week1/shopping list/index.html

+                    <h3 class="heart">🤍</h3>
+                    <h3>강아지 폰케이스</h3>
+                    <h3>5,900</h3>


내용 파트에는 영역의 제목 태그인 h3보다는 p와 같은 다른 태그를 사용하면 어떨까요?

wrryu09 · 2024-04-08T02:07:59Z

week1/shopping list/index.html

+        </section>
+        <section>
+            <h1 id="t">상의</h1>
+            <label class="container">


label 태그는 주로 폼과 함께 사용되는데, 컨테이너 태그를 라벨로 설정하기보다는 다른 태그를 사용하는 게 좋을 것 같아요~~!
사용 사례 첨부합니당
https://www.tcpschool.com/html-tags/label

오옷 그렇군요!! label 태그는 폼, 인풋, 버튼!! 이런 느낌 이군요:) 감사해요오

wrryu09 · 2024-04-08T02:09:25Z

week1/todo list/todolist.html

+            <h1 class="sectionTitle">Doing . . .</h1>
+            <div id="todo">
+                <h2>솝트 과제 하지만 하난줄알았지 키키</h2>
+                <button>x</button>


여기도 텍스트를 버튼으로 사용하기보단 아이콘을 임포트해주는 게 좋을 것 같아요!

wrryu09 · 2024-04-08T02:10:17Z

week1/todo list/style.css

+    animation-iteration-count: infinite;
+
+}
+@-webkit-keyframes guemtle {


애니메이션 이름 넘 재밌네요 ㅋㅋㅋ
과제 고생하셨습니당 👏

imddoy

1차 세미나 과제 수고했어요!! 쇼핑리스트에 탐나는 것들이 꽤 많아서 재밌었습니다 ㅎㅎ

imddoy · 2024-04-09T04:04:29Z

week1/shopping list/index.html

+    </main>
+
+    <footer>
+        <h1>!여기서 재미있는 사실!</h1>


헤헤 재밌습니다~

imddoy · 2024-04-09T04:13:11Z

week1/todo list/todolist.html

+                <h2>솝트 과제 하지만 하난줄알았지 키키</h2>
+                <button>x</button>
+            </div>
+            <div id="todo">


혹시 class가 아니라 id를 선택한 이유가 있나요? class로 재사용하는 것도 조심스레 추천하고 지나갑니다~~

맞습니다.. ㅎㅎ 아무생각없이 사용했죠 또,,ㅎㅎ 알려주셔서 감사용~~!!

ocahs9 · 2024-04-09T10:00:53Z

week1/shopping list/index.html

+        </section>
+        <section>
+            <h1 id="all">전체</h1>
+            <label class="container">


컨테이너는 뭔가 박스 느낌이니까.. 진짜 박스 느낌을 내는 div같은 태그가 더 잘 어울리지 않을까 생각합니다..!
그게 나중에 css 적용할 때도 더욱 직관적일 것 같아요 !

오 호 그렇군요!! 태그 사용 넘 어렵네요,, 😢 열심히 적용해보겠슴다 👍

ocahs9 · 2024-04-09T10:03:07Z

week1/shopping list/style.css

+    display: inline-block;
+    color: darkgreen;
+    font-size: 50px;
+}


light green 과 dark green..
통일성 좋아요 !!

이걸 알아보시다니 후훗

ocahs9 · 2024-04-09T10:04:38Z

week1/shopping list/style.css

+    font-size: 30px;
+}
+
+    /*화면 크기 줄일 때 반응형.. 수동으로 했다...! ㅋㅋ */


ㅋㅋ 저도 일일히 수동으로 계산했어요!

ocahs9 · 2024-04-09T10:05:21Z

week1/shopping list/style.css

+    }
+}
+.heart:hover {
+    filter: invert(100%) ;


invert로 간편하게 색을 반전시킬 수 있군요!
하나 배워갑니다 ~~

ocahs9 · 2024-04-09T10:10:06Z

클래스들 네이밍한 것들만 봐도 누가 작성한 지 알 수도 있을 것 같아요 ㅋㅋㅋ
다른 분들도 언급해주셨지만 클래스 재사용을 위해 id보다는 class 명을 사용하는 걸 추천드립니다 !

과제 고생하셨습니다 !! 👍

ljh0608

제가 분명히 봤는데요 h1태그에 하트한거 분명 기억나는데 왜 리뷰가 안남겨졌을까요...?
다른 팀원들의 리뷰 답변도 달아주시고 꼭 반영해주세요! 보고 그냥 지나가면 체화되지 않습니다 :)
span태그 내부에 다른 태그들이 있는것은 인라인 요소 내에 블록요소가 들어가는 것이라 잘못된 사용방법이라 반영해주시면 좋을 것 같아요~
다음에 제가 무언갈 놓친다면 꼭 !! 연락주세요 ㅎㅎ 리뷰 늦어서 죄송합니다!

ljh0608 · 2024-04-18T15:33:41Z

week1/shopping list/index.html

+        <label>
+            <span></span>
+            <span></span>
+            <span></span>
+        </label>


배치로 인해 h1태그를 두번으로 나눠서 사용하신 것 같은데 아이콘을 img나 svg로 사용하시는 것이 좋을 것 같아요!
h1태그는 SEO에 가장 중요한 태그 중 하나인 데 하트가 검색엔진으로 잡히면 SEO에서 좋지 않은 결과를 보일 것 같습니다!

ljh0608 · 2024-04-18T15:34:30Z

week1/shopping list/index.html

+        <span>
+            <button><a href="#all">전체</a></button>
+            <button><a href="#t">상의</a></button>


이부분은 ul, li태그 사용이 의미론 적으로 더 올바를 것 같네요! 그리고 a태그를 button태그로 감쌀필요 없이 바로 사용하시는 것이 더 올바른 html사용일것 같아요~

오호 a태그 혼자 쓰기..메모메모.. ul, li도 시멘틱 구조를 만들기 위해...! 명심하겠습니다!! 😄

ljh0608 · 2024-04-18T15:36:20Z

week1/shopping list/index.html

+            <div class="banner">
+                <img src="img/a1.jpg" alt="acc"/>
+                <img src="img/a2.jpg" alt="acc"/>
+                <img src="img/a3.jpg" alt="acc"/>
+                <img src="img/s1.jpg" alt="skirt"/>
+                <img src="img/s2.jpg" alt="skirt"/>
+                <img src="img/s3.jpg" alt="skirt"/>
+                <img src="img/t1.jpg" alt="T-shirt"/>
+                <img src="img/t2.jpg" alt="T-shirt"/>
+                <img src="img/t3.jpg" alt="T-shirt"/>
+                <img src="img/t4.jpg" alt="T-shirt"/>
+                <img src="img/t5.jpg" alt="T-shirt"/>
+            </div>


이부분 또한 아래와 같이 코드를 변경할 수 있을 것 같아요! 또한 alt태그는 img태그가 정상적으로 작동하지 않았을 때와 스크린리더 사용자에게 도움을 줄 수 있으니 각각 img에 대한 정보를 넣어주는 것이 올바른 사용법 같습니다 ㅎㅎ

<ul class="banner"> <li><img src="img/a1.jpg" alt="acc"/></li> . . . </ul> ```

오오 맞습니다 alt태그는 사용자에게 도움을 준다... 마음에 새기기.... 🥇

ljh0608 · 2024-04-18T15:37:08Z

week1/shopping list/index.html

+                    <h3 class="heart">🤍</h3>
+                    <h3>강아지 폰케이스</h3>
+                    <h3>5,900</h3>


저도 같은 생각입니다 p태그보다는 g3태그가 조금 더 의미론적으로 적절할 것 같네요!

ljh0608 · 2024-04-18T15:38:18Z

week1/shopping list/index.html

+                <span>
+                    <img src="img/t1.jpg" alt="T-shirt"/>
+                    <h3 class="heart">🤍</h3>
+                    <h3>프릴 슈 블라우스</h3>
+                    <h3>22,620</h3>
+                </span>


span태그는 인라인 태그라 이렇게 컨테이너처럼 쓰려면 div태그를 사용하시는 것이 적절합니다!
또한 이부분에선 article태그로 각각의 아이템을 나타내면 더 의미있는 태그 사용이 되겠네요

오 아티클 태그를 사용하고 싶었는데 잘 모르겠어서 망설이고 있었는데.. 요런느낌에 쓰면 되는 거군요!! 감사합니다아 😄

ljh0608 · 2024-04-18T15:40:57Z

week1/shopping list/style.css

+nav{
+    display: flex;


html선택자는 한 페이지 내에서 여러번 반복해서 등장할 수 있기 때문에 원치않은 style오버랩이 발생할 수 있어요!
nav에 class선택자를 사용하셔서 css를 적용하시는건 어떨까요??

ljh0608 · 2024-04-18T15:41:48Z

week1/shopping list/style.css

+nav > span > button {
+    border: 0;
+    background-color: transparent;
+    font-family: "Gaegu", sans-serif;
+    font-weight: 550;
+    font-size: 1.5rem;
+    font-style: normal;
+}


이부분 역시 마찬가지로 span태그에 button태그가 여러개이거나 새로운 button을 추가해야되는 상황이면 많은 코드를 수정해야할 수 있습니다!
또한 span태그는 인라인 태그라 button태그가 내부에 있는 것이 어색해 보이네요 ㅎ

ljh0608 · 2024-04-18T15:42:32Z

week1/shopping list/style.css

+    flex-wrap: nowrap;
+    margin-top: 8rem;


flex-wrap은 nowrap이 default 속성이라 지워주셔도 됩니다!

ljh0608 · 2024-04-18T15:42:57Z

week1/shopping list/style.css

+    max-width: 15.625rem;
+    padding: 0.938rem;
+    border-radius: 1.25rem;


요 값은 어떻게 하다가 세자리나 나온걸까요...?

그.. 원래 픽셀값이었는데 리뷰 반영한다고 rem계산기 돌려서.. 나온값으로.. 하려다보니... 그렇게 나왔습니다....ㅠ 😭

ljh0608 · 2024-04-18T15:43:40Z

week1/todo list/style.css

+header {
+    position: absolute;
+    top:50px;
+    width: 100%;
+}


이부분 역시 header에 class명을 부여해서 class선택자로 css 코드를 작성하는 것이 유지보수에 좋아보입니다!

Jeongbowoon added 3 commits April 4, 2024 23:28

week1 초기 설정

0170bfa

dev complete shop list

0cb3a69

무한배너 수정

9ee36ad

Bowoon1216 changed the base branch from main to week1 April 5, 2024 05:01

Bowoon1216 changed the base branch from week1 to main April 5, 2024 05:05

Bowoon1216 requested review from ljh0608, imddoy, wrryu09 and ocahs9 April 5, 2024 13:56

Bowoon1216 self-assigned this Apr 5, 2024

wrryu09 reviewed Apr 8, 2024

View reviewed changes

imddoy reviewed Apr 9, 2024

View reviewed changes

ocahs9 reviewed Apr 9, 2024

View reviewed changes

REVIEW: remove possible 'id', add img alt, use unit of rem

1b0e10d

ljh0608 reviewed Apr 18, 2024

View reviewed changes

[1주차 기본/심화/공유 과제] 쇼핑리스트, 투두리스트 #1

Are you sure you want to change the base?

[1주차 기본/심화/공유 과제] 쇼핑리스트, 투두리스트 #1

Conversation

Bowoon1216 commented Apr 5, 2024 • edited Loading

✨ 구현 기능 명세

🧩 기본 과제1

🧩 기본 과제2

🌠 심화 과제

공유과제

📌 내가 새로 알게 된 부분

💎 구현과정에서의 고민과정(어려웠던 부분) 공유!

🥺 소요 시간

🌈 구현 결과물

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wrryu09 Apr 8, 2024 • edited Loading

Choose a reason for hiding this comment

imddoy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ocahs9 commented Apr 9, 2024

ljh0608 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Bowoon1216 commented Apr 5, 2024 •

edited

Loading

wrryu09 Apr 8, 2024 •

edited

Loading

ljh0608 left a comment •

edited

Loading